<!--
* @description 警情详情
* @author zywu
* @date 2021/04/29 14:58:11
!-->
<template>
  <div class="firealarm-detail" :class="{'hide-fire-tip':!showFireTip}">
    <div>
      <div class="iconfont icon-return return-btn" @click="onReturn">警情详情</div>
    </div>
    <div class="d-flex row-unit">
      <fire-alarm-animation :dataObj="dataObj" :alarmList="fireAlarmList" :deviceList="deviceList"></fire-alarm-animation>
      <div class="unit-wrap">
        <div class="d-flex" style="min-height:51px;">
          <div class="unit-info">
            <div class="unit-name">{{dataObj.unitName}}</div>
            <div class="unit-addr">{{dataObj.unitAddress}}</div>
          </div>
          <el-button v-if="!readonly" type="primary" class="el-button--basic" @click="onOpenDeal">警情处置</el-button>
          <!-- <el-button type="primary" class="el-button--basic" @click="onMaintain">转为维修单</el-button> -->
          <div class="btn-call" @click="handlePhoneCall(1)">
            <i class="el-icon el-icon-phone"></i>
            物业
          </div>
          <div class="btn-call" @click="handlePhoneCall(2)">
            <i class="el-icon el-icon-phone"></i>
            业主
          </div>
          <div class="btn-call" @click="handlePhoneCall(3)">
            <i class="el-icon el-icon-phone"></i>
            安全责任人
          </div>
          <div class="btn-call is-119" @click="handlePhoneCall(4)">
            <i class="el-icon el-icon-phone"></i>
            119（大型火灾）
          </div>
        </div>
        <div class="tab-wrap">
          <div class="d-flex ai-center tabs">
            <div
              v-if="dataObj.alarmType==1||dataObj.alarmType==3"
              class="tab-item"
              :class="{ 'is-active':activeTab==1 }"
              @click="onTabClick(1)"
            >关联{{dataObj.alarmType==1?'预警':'故障'}}</div>
            <div class="tab-item" :class="{ 'is-active':activeTab==2 }" @click="onTabClick(2)">设备情况</div>
            <div class="tab-item" :class="{ 'is-active':activeTab==3 }" @click="onTabClick(3)">场所详情</div>
            <div class="tab-item" :class="{ 'is-active':activeTab==4 }" @click="onTabClick(4)">地图位置</div>
            <div class="tab-item" :class="{ 'is-active':activeTab==5 }" @click="onTabClick(5)">附近监控</div>
          </div>
          <div v-if="showFireTip" class="tip text-center">现场{{fireAlarmCount}}设备发生报警，系统判断疑似火灾发生，请尽快联系现场值班人员进行处置</div>
          <div v-show="activeTab==1">
            <el-table
              :data="alarmList"
              :height="showFireTip?458:508"
              :default-sort="{}"
              @sort-change="sortChange"
              @selection-change="onSelectionChange"
            >
              <el-table-column v-if="!readonly" type="selection" width="60" align="center" :selectable="selectable"></el-table-column>
              <el-table-column label="序号" type="index" width="60"></el-table-column>
              <el-table-column prop="alarmStatus" label="处置状态" width="100">
                <template slot-scope="sc">
                  <span class="deal-status" :class="'status'+(sc.row.alarmStatus||1)">{{formatAlarmStatusName(sc.row)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="deviceAddress" label="设备位置" show-overflow-tooltip></el-table-column>
              <el-table-column prop="createTime" label="发生时间" width="180"></el-table-column>
              <el-table-column prop="duration" label="持续时长" :formatter="formatDuration"></el-table-column>
            </el-table>
          </div>
          <div v-show="activeTab==2">
            <el-table :data="deviceList" :height="showFireTip?458:508">
              <el-table-column prop="img" label="图片" align="center">
                <template v-if="scope.row.categoryPicUrl != ''" slot-scope="scope">
                  <img
                    :src="scope.row.categoryPicUrl.split(',')[0]"
                    width="50px"
                    height="50px"
                    @click="$imgPreview"
                    :data-imgpreview="scope.row.categoryPicUrl"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="name" label="名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="detailLocation" label="位置" show-overflow-tooltip></el-table-column>
              <el-table-column prop="deviceValue" label="当前值" show-overflow-tooltip>
                <template slot-scope="scope">
                  <p
                    v-for="item in scope.row.analogList"
                    :key="item.id"
                  >{{ item.dataTypeName + "：" + item.analogValue + item.analogUnits }}</p>
                </template>
              </el-table-column>
              <el-table-column prop="deviceStatus" label="当前状态">
                <template slot-scope="scope">
                  <div
                    v-if="scope.row.realTimeStatus == 0"
                    class="type-tags type-color-3"
                  >{{ scope.row.realTimeStatusName }}</div>
                  <div
                    v-else-if="scope.row.realTimeStatus == 10"
                    class="type-tags type-color-1"
                  >{{ scope.row.realTimeStatusName }}</div>
                  <div
                    v-else-if="scope.row.realTimeStatus == 20"
                    class="type-tags type-color-2"
                  >{{ scope.row.realTimeStatusName }}</div>
                  <div
                    v-else-if="scope.row.realTimeStatus == 40"
                    class="type-tags type-color-5"
                  >{{ scope.row.realTimeStatusName }}</div>
                  <div v-else class="type-tags type-color-8">{{ scope.row.realTimeStatusName }}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-show="activeTab==3">
            <fire-alarm-place :dataObj="dataObj"></fire-alarm-place>
          </div>
          <div v-show="activeTab==4">
            <fire-alarm-map :dataObj="dataObj"></fire-alarm-map>
          </div>
          <div v-show="activeTab==5">
            <fire-alarm-monitor :dataObj="dataObj" :height="showFireTip?458:508"></fire-alarm-monitor>
          </div>
        </div>
      </div>
    </div>
    <div class="first-title">警情处置信息</div>
    <fire-alarm-timeline :dataList="timelineData"></fire-alarm-timeline>

    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      title="警情处置"
      width="720px"
      top="10vh"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      @close="closeDialogHandle"
      v-dialogDrag
    >
      <deal-with-police :dataObj="dataObj" :relatedAlarms="dataListSelection" :closeFun="closeDialogHandle"></deal-with-police>
    </el-dialog>
  </div>
</template>

<script>
import { getFcfStatusList, getFcfRealTimeStatusCountOverview } from '@/api/fcf'
import util from '@/utils/util'
import FireAlarmMap from './FireAlarmMap'
import FireAlarmAnimation from './FireAlarmAnimation'
import DealWithPolice from './DealWithPolice'
import {
  alarmCallout,
  getAlarmRelationAlarmList,
  getAlarmEventList,
} from '@/api/spray'
import { mapState } from 'vuex'
import FireAlarmTimeline from './FireAlarmTimeline.vue'
import FireAlarmPlace from './FireAlarmPlace.vue'
import FireAlarmMonitor from './FireAlarmMonitor.vue'

export default {
  components: {
    FireAlarmMap,
    FireAlarmAnimation,
    DealWithPolice,
    FireAlarmTimeline,
    FireAlarmPlace,
    FireAlarmMonitor,
  },
  props: {
    dataObj: {
      type: Object,
      default: function () {
        return {}
      },
    },
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      statusList: [
        { text: '未处置', value: '1' },
        { text: '处置中', value: '2' },
        { text: '已处置', value: '3' },
      ],
      typeList: [
        { text: '火灾报警', value: '1' },
        { text: '火灾预警', value: '2' },
        { text: '安全隐患', value: '3' },
        { text: '设备故障', value: '4' },
      ],
      activeTab: 1,
      alarmList: [],
      deviceList: [],
      dataListSelection: [],
      dialogVisible: false,
      timelineData: [],
      fireAlarmCount: 0,
    }
  },
  computed: {
    ...mapState(['userinfo']),
    showFireTip() {
      return this.fireAlarmCount > 1
    },
    fireAlarmList() {
      return this.dataObj.alarmType == 1
        ? this.alarmList
        : [
            {
              deviceId: this.dataObj.deviceId,
              realTimeStatus: this.dataObj.alarmLevel == 1 ? 10 : 20,
            },
          ]
    },
  },

  created() {
    if (this.dataObj.alarmType == 2 || this.dataObj.alarmType == 4) {
      this.activeTab = 2
    }
    this.init()
  },

  mounted() {
    this.$nextTick(() => {
      var a = document.querySelectorAll('.router-view')
      for (var i = 0; i < a.length; i++) {
        if (a[i].parentElement.style.display != 'none') {
          a[i].scrollTo(0, 0)
        }
      }
    })
  },

  methods: {
    selectable(row) {
      return row.alarmStatus == 1
    },
    init() {
      if (this.dataObj.alarmType == 1 || this.dataObj.alarmType == 3) {
        this.getAlarmRelationAlarmList()
      }
      this.getAlarmEventList()
      this.getFcfStatusList()
      this.getStatic()
    },
    getFcfStatusList() {
      getFcfStatusList({
        orgIds: this.dataObj.unitId,
        fbsId: 0,
        systemId: '-1',
        fcfCategoryId: '',
        fireTType: '-1',
        pageSize: 10,
        queryType: 0,
      }).then((res) => {
        this.deviceList = res.data
      })
    },
    getStatic() {
      let parames = {
        orgIds: this.dataObj.unitId,
        fbsId: 0,
        fireTTypes: 10,
      }
      getFcfRealTimeStatusCountOverview(parames).then((res) => {
        this.fireAlarmCount = res.data.fireAlarmCount
      })
    },
    getAlarmEventList() {
      getAlarmEventList({
        alarmId: this.dataObj.id,
        containRelationAlarmEvent: 1,
      }).then((res) => {
        this.timelineData = res.data.map((n) => {
          n.eventContent = n.eventContent ? JSON.parse(n.eventContent) : {}
          return n
        })
        // .concat([
        //   {
        //     eventType: 3,
        //     eventContent: {
        //       现场情况:
        //         'resource/ilink_1620442645184.png,resource/ilink_1620453822515.mp4',
        //     },
        //   },
        // ])
      })
    },
    formatAlarmStatusName(row) {
      let obj = this.statusList.filter((n) => {
        return n.value == row.alarmStatus
      })[0]
      return obj ? obj.text : ''
    },
    handlePhoneCall(type) {
      alarmCallout({
        operator: this.userinfo.accountName,
        alarmIds: '',
        callTel: '',
        callName: '',
      }).then((res) => {
        if (res.status == 200) {
          this.$message.success('操作成功')
        } else {
          this.$message.error(res.info)
        }
      })
    },
    onSelectionChange(val) {
      this.dataListSelection = val
    },
    onOpenDeal() {
      if (this.dataObj.alarmType == 1 || this.dataObj.alarmType == 3) {
        if (this.dataListSelection.length == 0) {
          return this.$message.warning('请选择待操作的警情')
        }
      }
      this.dialogVisible = true
    },
    onMaintain() {
      if (this.dataObj.alarmType == 1 || this.dataObj.alarmType == 3) {
        if (this.dataListSelection.length == 0) {
          return this.$message.warning('请选择待操作的警情')
        }
      }
      this.$confirm('确认转为维修单吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {})
    },
    closeDialogHandle(flag) {
      this.dialogVisible = false
      if (flag) {
        this.dataListSelection = []
        this.init()
      }
    },
    sortChange(obj) {
      if (obj.order) {
        this.formInline.order = obj.order == 'descending' ? 'desc' : 'asc'
        this.formInline.orderByPro = obj.prop
        this.getList(1)
      }
    },
    getAlarmRelationAlarmList() {
      getAlarmRelationAlarmList({
        alarmId: this.dataObj.id,
      }).then((res) => {
        this.alarmList = res.data.map((n) => {
          n.realTimeStatus = 10
          return n
        })
      })
    },
    onTabClick(tab) {
      this.activeTab = tab
    },
    onReturn() {
      this.$emit('return')
    },
    formatDuration(row, col, val) {
      let milliSeconds =
        (row.closeTime ? new Date(row.closeTime) : new Date()).getTime() -
        new Date(row.createTime).getTime()
      return util
        .getTimeDuration(parseInt(milliSeconds / 1000))
        .splice(0, 2)
        .map((m) => {
          return m.value + m.unit
        })
        .join('')
    },
  },
}
</script>
<style lang='scss'>
.firealarm-detail {
  &.hide-fire-tip {
    .firealarm-place-info {
      height: 500px;
    }
    .smartspray-map__body {
      height: 508px;
    }
  }
  .firealarm-place-info {
    height: 450px;
  }
  .return-btn {
    font-size: 20px;
  }
  .el-button--basic {
    height: 40px;
  }
  .alarm-type {
    margin-left: 10px;
    display: inline-block;
    padding: 2px 10px;
    color: #fff;
    border-radius: 14px;
    &.type1 {
      background: #fd5e5e;
    }
    &.type2 {
      background: #feaa4b;
    }
    &.type3 {
      background: #ffd10d;
    }
    &.type4 {
      background: #49a2ff;
    }
    &.type5 {
      background: #47cfad;
    }
  }
  .audio-player {
    margin-top: 10px;
  }
  .first-title {
    margin-top: 15px;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
    color: #5070d0;
  }
  .row-unit {
    margin-top: 5px;
  }
  .unit-wrap {
    margin-left: 20px;
    width: calc(100% - 864px);
  }
  .unit-info {
    margin-right: 10px;
    flex: 1;
  }
  .unit-name {
    font-size: 20px;
  }
  .unit-addr {
    color: #666;
  }
  .btn-call {
    margin-left: 5px;
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid #446bde;
    border-radius: 5px;
    height: 40px;
    line-height: 38px;
    color: #446bde;
    cursor: pointer;
    &:hover {
      background: #446bde;
      color: #fff;
    }
    &.is-119 {
      color: #d44646;
      border-color: #d44646;
      &:hover {
        background: #d44646;
        color: #fff;
      }
    }
  }
  .tab-wrap {
    margin-top: 20px;
    padding: 0 0 20px;
    background: #f6f8fb;
    height: 562px;
  }
  .tab-item {
    padding: 16px 20px 10px;
    border-bottom: 4px solid #f6f8fb;
    cursor: pointer;
    color: #999999;
    font-size: 16px;
    &:hover {
      color: #446bde;
    }
    &.is-active {
      border-color: #446bde;
      color: #446bde;
    }
  }
  .tip {
    height: 50px;
    line-height: 50px;
    background: #fef3f3;
    color: #d44646;
  }
  .el-table {
    border-top: 1px solid #ebeef5;
  }
  .btn-wrap {
    padding: 20px 0 0 20px;
  }
  .el-table th,
  .el-table tr,
  .el-table,
  .el-table__expanded-cell {
    background: #f6f8fb;
  }
  .cell-col {
    margin-top: 15px;
    .cell-title {
      padding: 0 0 0 20px;
    }
    .el-button {
      padding: 0;
    }
  }
  .deal-status {
    position: relative;
    padding-left: 10px;
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 7px;
      height: 7px;
      background: #fd5e5e;
      border-radius: 50%;
    }
    &.status2 {
      &::before {
        background: #43bcff;
      }
    }
    &.status3 {
      &::before {
        background: #47cfad;
      }
    }
  }
}
</style>